<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-input v-model="listQueryone.company" size="small" style="width: 200px" :placeholder="$t('table.company')" clearable
        @change="handleFilter" /> -->
        <el-select v-model="listQueryone.company_id"  @change="handleFilter(listQueryone.company_id)" :placeholder="$t('table.company')" clearable size="small">
            <el-option v-for="(item,index) in companylist " :key="index" :label="item.company" :value="item.id" />
        </el-select>
        <!-- <el-select v-model="listQueryone.id"  @change="handleFiltertow(listQueryone.department)">
            <el-option v-for="(item,index) in department_list " :key="index" :label="item.department" :value="item.id" />
        </el-select> -->
      <el-input v-model="listQueryone.department" size="small" style="width: 200px" :placeholder="$t('table.department')" clearable
        @change="handleFilter" />
      <el-button type="primary" size="small">{{$t('table.search')}}</el-button>
      <add-company-page @getLists="getLists" />
      <add-department-page @getLists="getLists" />
      <company @getLists="getLists" />
    </div>
    <div>
      <el-table v-loading="listLoading" :data="list" :header-cell-style="{
          background: '#f2f2f2',
          color: '#606266',
          height: '10px',
          padding: '5px'
        }" :row-style="{ height: '39px', padding: '0px' }" :cell-style="{ padding: '0px' }" element-loading-text="Loading" border fit
        highlight-current-row height="630px" width="80%">
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('table.company')" align="center">
          <template slot-scope="scope">
            {{ scope.row.company }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.department')" align="center">
          <template slot-scope="scope">
            {{ scope.row.department }}
          </template>
        </el-table-column>
        <el-table-column align="center" width="200px" :label="$t('table.operation')" class="operation">
          <template slot-scope="scope">
            <edit-page :row_id="Number(scope.row.id)" @getLists="getLists" @click="delUser(scope.row.id)" />
            <el-button type="danger" size="small" @click="delUser(scope.row.id)">{{$t('organization.delete_department')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination :current-page="current_page" :page-sizes="[10, 50, 100]" :page-size="per_page" :total="total"
          layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>
<script>
import store from "@/store";
import editPage from "./editPage";
import company from "./Company";
import addCompanyPage from "./addCompanyPage";
import addDepartmentPage from "./addDepartmentPage";
import {
  departmentget_list,
  department_delete,
  get_select
} from "@/api/organization_manage/organization_manage";

import {
  department_get_select,
} from "@/api/user_manage/user_manage";
export default {
  components: {
    addCompanyPage,
    editPage,
    addDepartmentPage,
    company,
  },
  data() {
    return {
      dialogVisible: false,
      list: null,
      listLoading: true,
      total: null,
      companylist: null,
      current_page: null,
      last_page: null,
      per_page: null,
      department_list: null,
      listQueryone: {
        company_id: undefined,
        id: undefined,
        page: 1,
        pagesize: 10,
      },
      DepartmentalData: null,
    };
  },
  created() {
    this.getLists();
  },
  methods: {
    // 获取展示列表数据
    getLists() {
      this.listLoading = true;
      departmentget_list(store.getters.token, this.listQueryone).then((res) => {
        this.list = res.data.list.data;
        this.current_page = res.data.list.current_page;
        this.per_page = res.data.list.per_page;
        this.last_page = res.data.list.last_page;
        this.total = res.data.list.total;
        this.listLoading = false;
      });
      // 获取公司数据
      get_select(store.getters.token).then((res) => {
        this.companylist = res.data.list
      })
    },

    // 分页相关方法
    handleFilter(val) {
     ( this.listQueryone.id = '')
      console.log(this.department_list,'department_list')
      console.log(val, "val");
      this.listQueryone.page = 1;
      this.getLists();
      department_get_select(store.getters.token, { company_id: val }).then(
        (res) => {
          this.department_list = res.data.list;
          console.log(this.department_list, "this,department_list");
          console.log(res, "res.data.list");
        }
      );
      this.department_list = []
    },
    handleFiltertow(val){
      this.listQueryone.page = 1;
      this.getLists();
    },
    handleSizeChange(val) {
      this.listQueryone.pagesize = val;
      this.getLists();
    },
    handleCurrentChange(val) {
      this.listQueryone.page = val;
      this.getLists();
    },
    // 根据id删除数据
    delUser(id) {
      this.$confirm(this.$t('table.delete_msg'), this.$t('table.tip'), {
        confirmButtonText: this.$t('table.complete'),
        cancelButtonText: this.$t('table.cancel'),
        type: "warning",
      })
        .then(() => {
          department_delete(store.getters.token, { id: id }).then((res) => {
            if (res.status == 200) {
              this.$message.success(this.$t('table.delete_complete'));
              this.getLists();
            } else {
              this.$message.error();
              (this.$t('table.delete_fail'));
            }
          });
        })
    },
  },
};
</script>
<style scoped>
.filter-container {
  margin-bottom: 8px;
}

.app-container {
  border: #eee solid 10px;
}

.xob {
  line-height: 30px;
}
</style>
